<template>
  <div>
    <div class="title">周末去哪儿</div>
    <div>
      <ul>
        <li class="wrap" v-for="item of weekendList" :key="item.id">
          <div class="imgBox">
            <img :src="item.url" alt="" />
          </div>
          <div class="descBox">
            <p class="theme" v-text="item.theme"></p>
            <p class="desc" v-text="item.desc"></p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    weekendList: {
      type: [Array],
      required: true
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@styles/mixins.styl';

.title{
  line-height 0.8rem
  background #eee
  text-indent .2rem
}
.wrap{
  overflow hidden
  line-height 0.4rem
  border-bottom 1px solid #eee
  .imgBox{
    height 0
    padding-bottom 40%
    position relative
    img{
      position absolute
      top 0
      bottom 0
      width 100%
      height 100%
    }
  }
  .descBox{
    height 100%
    padding 0.2rem 0.25rem
    letter-spacing 0.5px
    .theme{
      font-weight bold
      ellipsis()
    }
    .desc{
      font-size 0.25em
      color #bbb
      ellipsis()
    }
  }
}
</style>
